<template>
    <div class="Index">
     
        <div style="display: flex;">

            <el-scrollbar style="padding: 10px 0px;">
                <div class="scrollbar-flex-content">
                    <div class="item" v-for="item in menuList">
                        <el-text class="mx-1" size="large">{{ item.catName }}</el-text>
                    </div>
                </div>
            </el-scrollbar>
            <div class="moreMenu" @click="dialogVisible = true">
                <el-icon style="line-height: 22px;height: 22px;font-size: 24px;">
                    <Grid />
                </el-icon>
            </div>

        </div>

        <el-dialog v-model="dialogVisible" title="选择频道" top="75px" width="100%" :before-close="handleClose">
            <el-row :gutter="10">
                <el-col :span="6" v-for="item in menuList">
                    <div class="grid-content ep-bg-purple">{{ item.catName }}</div>
                </el-col>
            </el-row>
        </el-dialog>

    </div>
    <div id="Register">
        <el-button type="primary" @click="this.$router.push('/newsList')">热点</el-button>
        <el-button  type="primary" icon="el-icon-user" @click="this.$router.push('/task03/user')">用户信息</el-button>
        
    </div>
</template>

<script>
import { getArticleTypeAll } from '@/api/article'
export default {
    data() {
        return {
            input: '',
            // menuList: ['后端', '前端', "移动开发", '编程语言', 'Java', "Python",
            //     "人工智能", "AIGC", "大数据", "数据库", "数据结构与算法", "音视频",
            //     "云原生", "云平台", "前沿技术", "开源", "小程序",
            //     "运维", "服务器", "操作系统", "硬件开发", "嵌入式",
            //     "微软技术", "软件工程", "测试", "安全",
            //     "网络与通信", "用户体验计划", "学习和成长", "搜索",
            //     "开发工具", "游戏", "Harmony OS", "区块链",
            //     "数学", "3C硬件", "资讯"],
            menuList: [],
            dialogVisible: false
        }
    },
    mounted() {
        this.getArticleType()
    },
    methods: {
        getArticleType() {
            getArticleTypeAll().then(res => {
                console.log(res);
                this.menuList = res.data.articleCats
            })
        }
    }
}
</script>

<style scoped>
* {
    margin: 0;
    padding: 0px
}

.scrollbar-flex-content {
    display: flex;
}

.item {
    flex-shrink: 0;
    margin-right: 20px;
    height: 22px;
}

.moreMenu {
    padding: 10px 0px;
}

.item>>>.el-text {
    color: #909399;
    line-height: 22px;
}

.grid-content {
    text-align: center;
    padding: 8px;
    background-color: rgba(85, 86, 102, .06);
    min-height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.el-col {
    margin-bottom: 20px;
}
/* 
.el-scrollbar>>>.el-scrollbar__bar,
.el-scrollbar>>>.is-horizontal {
    display: none !important;
} */

.Index>>>.el-dialog {
    border-radius: 10px 10px 0px 0px;
}
#Register {
    height: 700px;
    display: flex;
    align-items: center;
    /* justify-content: center; */
    flex-direction: column;
}
button {
    width: 400px;
    margin: 5px 900px !important;
    border-radius: 30px
}
</style>